<template>
  <div class="container">
    <div class="app-container">
      <button @click="fn($event, 99)">测试</button>
      <!-- 组织 -->
      <!--
        el-tree 用于展示树形数据 形成树形结构
          data => 提供树形数据
          props => 配置后端数据的字段名  label名字  children儿子
          default-expand-all => 展开所有

          想要提供每一行的结构 => 通过默认插槽
          我在提供结构的同时 想要使用一下数据 => 作用域插槽  <slot name="default" :data="" :node="" />
       -->
      <el-tree :data="list" :props="{ label: 'name', children: 'children' }" :default-expand-all="true">
        <template #default="{ data }">
          <!-- data 就是插槽上绑好的一个数据 => 当前节点的数据 -->
          <el-row style="width: 100%" type="flex" justify="space-between" align="middle">
            <el-col :span="8">{{ data.name }}</el-col>
            <el-col :span="8">
              <span style="margin-right: 10px;">{{ data.managerName }}</span>

              <!-- 下拉菜单 点击事件的触发: 冒泡 -->
              <!--
                $event
                  在自定义事件中 指的是本来的参数
                  在原生事件中 指的是本来的参数 事件对象

                  $emit('command', 'add')
                  $emit('command', 'edit')
                  $emit('command', 'del')

                  如果组件内部触发了一个自定义事件 且传递了参数
                  组件标签上就可以监听这个自定义事件 $event表示传递过来的参数
               -->
              <el-dropdown @command="handleCommand($event, data.id)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="del">删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </el-col>
          </el-row>
        </template>
      </el-tree>

      <!-- <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="8">111</el-col>
        <el-col :span="8">111</el-col>
      </el-row> -->
    </div>

    <AddDepart ref="addDepart" :current-id="currentId" :show-dialog.sync="showDialog" @refresh="getDepartmentList" />
  </div>
</template>

<script>
import { getDepartmentList, delDepart } from '@/api/department'
import { getTreeFromList } from '@/utils'
import AddDepart from './components/AddDepart.vue'

export default {
  name: 'Department',
  components: { AddDepart },
  data() {
    return {
      // 树形数据的每一项都是一个对象
      // 树形数据每一项必须有个字段label 表示他的"名字" => 文字描述
      // 树形数据每一项可能有个字段children 表示他的"儿子"
      // list: [
      //   {
      //     name: '黑马程序员',
      //     manager: '老许',
      //     children: [
      //       {
      //         name: '上海校区',
      //         manager: '老杨',
      //         children: [
      //           { name: '110期', manager: '老李' },
      //           { name: '111期', manager: '老蒋' },
      //           { name: '112期', manager: '老宋' }
      //         ]
      //       },
      //       { name: '北京校区', manager: '老李' },
      //       { name: '深圳校区', manager: '老王' }
      //     ]
      //   },
      //   { name: '博学谷', manager: '老张' },
      //   { name: '传智专修学院', manager: '老李' }
      // ]
      list: [],
      showDialog: false,
      currentId: -1 // 表示当前部门的id
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    fn(e, val) {
      console.log(11, e, val)
    },
    async getDepartmentList() {
      const res = await getDepartmentList()
      this.list = getTreeFromList(res, 0) // 列表转树形
      // console.log(this.list)
    },
    handleCommand(val, id) {
      // console.log(val, id)
      this.currentId = id // 添加(pid) 删除(自己) 编辑(自己)都需要使用

      if (val === 'add') {
        // 添加
        this.showDialog = true
      }
      if (val === 'edit') {
        // 编辑
        this.showDialog = true

        // 如果在这能调用子组件的getDepartDetail就好了
        this.$refs.addDepart.getDepartDetail(id)
      }
      if (val === 'del') {
        // 删除: 高危操作(二次确认) 请求=>提示=>重新渲染
        // 返回一个promise  确认 成功promise; 取消 失败promise
        this.$confirm('你确认要删我么?不想想').then(async() => {
          // console.log('确认了')
          await delDepart(id)
          this.$message.success('删除成功')
          this.getDepartmentList()
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.app-container {
  padding: 20px  80px;
  font-size: 14px;
}
</style>
